import { history } from '@umijs/max';
import styles from './index.less';
import { Alert, Button, Dropdown, Input, Select, Tabs, message } from 'antd';
import InfiniteList from '@/components/InfiniteList';
import { useMemo, useState } from 'react';
import chatRobotBg from '@/assets/images/chat_robot_top.png';
import useSearchParams from '@/hooks/useSearchParams';
import { EllipsisOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { delArticle, getMyArticleList } from '@/services/article';

const items = [
  {
    label: '文章',
    value: 'article',
  },
  {
    label: '草稿箱',
    value: 'drafts',
  },
]
const tabItems = [
  {
    label: `全部`,
    key: 0,
  },
  {
    label: `已发布`,
    key: 2,
  },
  {
    label: `审核中`,
    key: 1,
  },
  {
    label: `未通过`,
    key: 3,
  },
]
export default () => {
  const { type = items[0].value } = useSearchParams();
  const [nowTab,setNowTab] = useState(tabItems[0].key);
  const [search,setSearch] = useState('')
  const {run:refresh,data} = useRequest(getMyArticleList,{
    defaultParams:[{status:-1}]
  })
  const {run:del} = useRequest(delArticle,{
    manual:true,
    onSuccess:()=>{
      message.success('删除文章成功')
      refresh({status:-1})
    }
  })
  const list = useMemo(()=>{
    if(!data?.length) return []
    if(type === 'drafts') return data?.filter?.(i=>i.status===0)?.filter?.(i=>i.title.includes(search))
    if(nowTab === 0) return data?.filter?.(i=>i.status!==0)?.filter?.(i=>i.title.includes(search))
    return data?.filter?.(i=>i.status===nowTab)?.filter?.(i=>i.title.includes(search))
  },[data,type,search,nowTab])

  return <div className={styles.box}>
    <div className={styles.container}>
    <div className={styles.tab}>
      {
        items.map((item) => <div key={item.value} className={type === item.value ? styles.active : ''} onClick={() => {
          history.push(`/creator?type=${item.value}`)
        }}>
          {item.label}
        </div>)
      }
      <Button className={styles.btn} type='link' onClick={() => {
        window.open('/editor')}} >
        写文章
      </Button>
    </div>
    <div className={styles.contentContainer}  >
      <div className={styles.top}>
        <Tabs className={styles.tabs} activeKey={nowTab} onChange={(key)=>setNowTab(key)} style={{visibility: type==='article'? 'visible':'hidden'}} items={tabItems} />
          <Input placeholder="搜索" 
            className={styles.select}
            value={search}
            onChange={(e)=>setSearch(e.target.value)}
           />
      </div>
      <div className={styles.list}>
        <InfiniteList
          dataSource={list}
          hasMore={false}
          renderItem={(item, index) => {
            return <div key={index} className={styles.item} onClick={() => {
              if(item.status!==2)return
              history.push(`/view/${item.id}`)
            }}>
                <div className={styles.title}>
                  {item.title}
                  <Dropdown className={styles.more} menu={{ items:[
                    {
                      key: 'edit',
                      label: (
                        <span onClick={(e)=>{
                          e.stopPropagation();
                          window.open(`/editor?articleId=${item.id}`)
                        }}>
                          编辑
                        </span>
                      ),
                    },
                    {
                      key: 'delete',
                      label:
                      (
                        <span onClick={(e)=>{
                          e.stopPropagation();
                          del(item.id)
                        }}>
                          删除
                        </span>
                      ),
                    },
                  ] 
               }} placement="bottomRight">
                    <EllipsisOutlined/>
                  </Dropdown>
                </div>
                {
                    item.status===3&& <Alert
                    style={{padding:'8px 12px'}}
                    description={`驳回原因：${item.message??"包含敏感词"}`}
                    type="error"
                    // showIcon
                  />
                  }
                <div className={styles.desc}>
                  <span>{item.updatedTime}</span>
                  {
                    type==='article'&&item.status===2&&<span className={styles.otherInfo}>
                    <span>{item.likes}点赞</span>
                    <span>{item.views}阅读</span>
                    <span>{item.favorites}收藏</span>
                  </span>
                  }
                </div>

            </div>
          }}
        />
      </div>
    </div>
  </div></div>;
};
